html[data-theme='dark'] {
  --monoco-code-background: hsl(229, 20%, 15%);
  --monoco-code-lineHighlightBorder: hsl(228, 20%, 20%);
  --ifm-link-color: var(--ifm-color-primary-light);
  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
  --ifm-color-secondary: #cbd0d8;
  --ifm-color-secondary-dark: #b3bac6;
  --ifm-color-secondary-darker: #a7b0bd;
  --ifm-color-secondary-darkest: #838fa2;
  --ifm-color-secondary-light: #e3e6ea;
  --ifm-color-secondary-lighter: #eff0f3;
  --ifm-color-secondary-lightest: #fff;
}
html[data-theme='light'] {
  --monoco-code-background: #292d3e;
  --monoco-code-lineHighlightBorder: hsl(228, 20%, 25%);
  --ifm-hero-fade-to-background-color: #fff;
  --ifm-link-color: var(--ifm-color-primary-dark);
  --ifm-color-secondary: #ebedf0;
  --ifm-navbar-link-color: black;
}
:root {
  --ifm-color-primary-lightest: hsl(206, 69%, 81%);
  --ifm-color-primary-lighter: hsl(206, 69%, 72%);
  --ifm-color-primary-light: hsl(206, 69%, 68%);
  --ifm-color-primary: hsl(206, 69%, 55%);
  --ifm-color-primary-dark: hsl(206, 69%, 50%);
  --ifm-color-primary-darker: hsl(206, 69%, 44%);
  --ifm-color-primary-darkest: hsl(206, 69%, 35%);
  --ifm-color-info: hsl(206, 77%, 69%);
  --ifm-color-info-dark: hsl(206, 77%, 45%);
  --ifm-color-info-darker: hsl(206, 77%, 43%);
  --ifm-color-info-darkest: hsl(206, 77%, 37%);
  --ifm-color-info-light: hsl(206, 77%, 53%);
  --ifm-color-info-lighter: hsl(206, 77%, 55%);
  --ifm-color-info-lightest: hsl(206, 77%, 61%);
  --ifm-font-family-base: 'Rubik', 'Avenir Next', 'Segoe UI', Tahoma, Geneva,
    Verdana, sans-serif;
  --ifm-font-family-monospace: 'Roboto Mono', SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  --ifm-hero-background-color: var(--ifm-background-color);
  --ifm-hero-fade-to-background-color: var(--ifm-background-color);
  --ifm-pre-padding: 0.8rem;
}

.theme-code-block {
  --prism-background-color: var(--monoco-code-background) !important;
  --ifm-pre-background: var(--prism-background-color);
}

.navbar .navbar__link {
  font-family: var(--ifm-font-family-base);
}

.navbar .navbar__brand .navbar__title {
  font-family: var(--ifm-font-family-base);
}

code,
pre {
  font-family: var(-ifm-font-family-monospace);
}

html {
  font-family: var(--ifm-font-family-base);
}

table {
  display: table;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
